import * as DomUtil from "./src/dom/DomUtil.js";

import { Point, toPoint } from "./src/geometry/Point.js";
import { toLatLng } from "./src/geo/LatLng.js";
export default class handle {
  ctx;
  canvas;
  render;
  scale;
  mapScale;
  newCenterPos;
  animation = null;
  // 地图经纬度的中心点 改变这个值可 实现飞行
  mapCenterPos;

  // 坐标原点，该数据会在初始化的时候定位在页面正中间，后边会随着平移而改变,放大重置
  pageSlicePos = {
    x: 0,
    y: 0,
  };
  // 鼠标的位置，通过这个来算是否选中地图元素、高亮等
  curMousePos = {
    x: 0,
    y: 0,
  };
  // 记录鼠标按下的坐标，缩放后重置
  recordMovePoint = toPoint(0, 0);
  constructor(map) {
    this._map = map;
    this.canvas = map._container;
    this.ctx = map._ctx;
    this.init();
  }
  // 初始化 和 缩放后，需要重置一下
  setView(center, zoom) {
    this.mapCenterPos = center;
    this.pageSlicePos = {
      // 坐标系的原点
      x: this.canvas.width / 2,
      y: this.canvas.height / 2,
    };
    this.scale = zoom;
    // 缩放过后，需要重置这个点
    this.recordMovePoint = toPoint(0, 0);
  }

  init() {
    this.canvas.addEventListener("mousemove", this.mouseMove.bind(this));
    this.canvas.addEventListener("mousewheel", this.mouseWheel.bind(this));
    this.canvas.addEventListener("mousedown", this.mouseDown.bind(this));
    this.canvas.addEventListener("touchmove", this.touchmove.bind(this));

    this.pageSlicePos = {
      // 坐标系的原点
      x: this.canvas.width / 2,
      y: this.canvas.height / 2,
    };

    this.ctx = this.canvas.getContext("2d");
  }

  _updatePosition() {
    const e = { originalEvent: this._lastEvent };

    DomUtil.setPosition(this._element, this._newPos);
  }

  /**
   * 鼠标移动
   */
  mouseMove(e) {
    this.curMousePos.x = e.clientX;
    this.curMousePos.y = e.clientY;
  }
  touchmove(e) {
    // console.log(e)
   }

  /**
   * 滚轮缩放倍数
   */
  mouseWheel(e) {
    if (e.wheelDelta > 0) {
      if (this.scale < 16) {
        // this.scale += 0.25;
        this.scale++;
      }
    } else {
      if (this.scale > 1) {
        // this.scale -= 0.25;
        this.scale--;
      }
    }
    if (this.isInteger(this.scale)) {
      // 缩放有两个关键点，一个是中心点，中心点应该设置在鼠标当前处于的位置，一个是缩放倍数
      this._map.setView(this.mapCenterPos, this.scale);
    }
  }

  isInteger(obj) {
    return typeof obj === "number" && obj % 1 === 0;
  }

  /**
   * 拖动 canvas 动态渲染，拖动时，动态设置 pageSlicePos 的值
   * @param e Event
   */
  mouseDown(e) {
    // const ss = toPoint(e.clientX, e.clientY);
    // const latlng = this._map.layerPointToLatLng(ss);
    // console.log("鼠标点上去", e.clientX, e.clientY, latlng);
    // console.log("222", this._map.latLngToLayerPoint(latlng));
    // // this._map.panTo([latlng.lat, latlng.lng]);
    // return

    const downX = e.offsetX;
    const downY = e.offsetY;

    const kx = this.recordMovePoint.x;
    const ky = this.recordMovePoint.y;

    this.canvas.onmousemove = (ev) => {
      const moveX = ev.offsetX;
      const moveY = ev.offsetY;

      this.recordMovePoint.x = kx + (moveX - downX);
      this.recordMovePoint.y = ky + (moveY - downY);

      // 用来平移动的时候移动图片
      this._map.moveMap(
        toPoint(this.recordMovePoint.x, this.recordMovePoint.y)
      );

      const ss2 = toPoint(
        this.canvas.width / 2 - this.recordMovePoint.x,
        this.canvas.height / 2 - this.recordMovePoint.y
      );
      const tempLatlng = this._map.layerPointToLatLng(ss2);
      console.log(ss2);
      // console.log(tempLatlng, "tempLatlng");

      // // 设置新的中心点，缩放用得到
      this.mapCenterPos = [tempLatlng.lat, tempLatlng.lng];
      // // 设置新坐标来平移地图
      this._map._gridlayer._update(tempLatlng);

      // 设置当鼠标移动小于边界的10像素内，移除移动事件
      if (
        moveX > this.canvas.width - 10 ||
        moveX < 10 ||
        moveY < 10 ||
        moveY > this.canvas.height - 10
      ) {
        this.canvas.onmousemove = null;
        this.canvas.onmouseup = null;
      }

      // 鼠标抬起移除移动事件
      this.canvas.onmouseup = (en) => {
        this.canvas.onmousemove = null;
        this.canvas.onmouseup = null;
      };
    };
    this.canvas.onmouseup = (en) => {
      this.canvas.onmousemove = null;
      this.canvas.onmouseup = null;
    };
  }

  onClick(e) {}

  start() {
    this.render = requestAnimationFrame(this.start.bind(this));
  }
  destroy() {
    cancelAnimationFrame(this.render);
  }
}
